$(document).ready(function(){
	// declare that div as a touchable area programatically
	$('#somediv').touchArea();
	bindHandlers($('#somediv'));
	
	// the div is already declared touchable via html tag data-toucharea="true"
	bindHandlers($('#otherdiv'));
	
	
	function bindHandlers(elem) {
		elem.bind('touchdragstart', function(e, data) {
			log('touchdragstart - data.x:'+data.x+' data.y:'+data.y);
		});
		elem.bind('touchdragmove', function(e, data) {
			log('touchdragmove - data.x:'+data.x+' data.y:'+data.y+' data.diffX:'+data.diffX+' data.diffY:'+data.diffY+' data.durationMS:'+data.durationMS);
			elem.css('top',data.y-50).css('left',data.x-50);
		});
		elem.bind('touchdragend', function(e, data) {
			log('touchdragend - data.x:'+data.x+' data.y:'+data.y+' data.diffX:'+data.diffX+' data.diffY:'+data.diffY+' data.durationMS:'+data.durationMS+' data.didDrag:'+data.didDrag);
			// $('somediv').TouchArea('stop'); // declare that div is no longer touchable area
		});
	}
	
	function log(str) {
//		alert(str);
		$('.log').text(str);
	}
});
